<template>
  <div id="hr-statement">
    <div class="left">
      <div class="left-t">
        <div class="bar mb-20px">目标完成率-{{ current.text }}类型</div>
        <div class="progress-container">
          <Progress :percent="item.percent" :hover="currentHoverItem" v-for="item in targetCompletionRateList"
            :list="item.stripList" :total="item.number" :text="item.text"></Progress>
        </div>
        <div class="tooltip-wrap">
          <div class="tooltip-item flex items-center" @mouseleave="handleLeave(item)" @mouseenter="handleEnter(item)"
            v-for="(item, idx) in targetCompletionRateList[0].stripList">
            <div :style="{ background: item.color }" class="dot"></div>
            <span>{{ item.text }}</span>
          </div>
        </div>
      </div>
      <div class="left-c">
        <div class="bar">目标占比-{{ current.text }}类型</div>
        <div class="ring-box">
          <div class="ring-part-wrap" :class="[targetPercentList.length == 2 ? 'ring-two' : '']">
            <div class="ring-part flex" :class="[targetPercentList.length == 2 ? 'order' : '']"
              v-for="(item) in targetPercentList" :key="item.text">
              <span class="flex items-end" style="height: 58%;">
                <div class="ring-part-total font-size-20px">{{ item.number }}</div>
              </span>
              <span>
                <span class="flex dot-wrap" :class="[targetPercentList.length == 2 ? 'mb-50px' : '']">
                  <div class="ring-part-text font-500">{{ item.text }}</div>
                  <div class="dot" :style="{ background: item.color }"></div>
                </span>
                <div class="ring-part-percent font-size-20px">{{ item.percent }}%</div>
              </span>
            </div>
          </div>
          <Ring class="ring-chart" :target="totalTarget" :list="targetPercentList"></Ring>
        </div>
      </div>
      <div class="left-b">
        <div class="bar">分布情况-{{ current.text }}类型</div>
        <span class="flex justify-around">
          <Pie :list='item.list' :target="item.number" v-for="item in pieList" :key="item.text" :label="item.text">
          </Pie>
        </span>
      </div>
    </div>
    <div class="right">
      <div class="right-t">
        <div class="right-t-c">
          <div class="nav">
            <div class="nav-center">
              <div class="nav-item" v-for="item in navList" :key="item.text" @click="handleNavChange(item)">
                <img :src="getImageUrl((item.active ? item.activeUrl : item.url) + '.png', 'dataCentre/HRStatement')"
                  alt="" srcset="">
                <span :class="[item.active ? 'color-#fff' : '']">
                  {{ item.text }}
                </span>
              </div>
            </div>
            <div class="nav-right">
              <div class="date-view flex align-center">
                <!-- <img src="@/assets/images/dataCentre/recruitmentProgress/date.png" alt="" class="date-img"> -->
              <CalendarOutlined  class="font-size-20px mt-6px ml-10px"/>
                <span class="date-val" >{{ year}}</span>
                <a-select class="date-com" style="max-width: 200px" @change="handleYearChange" v-model:value="year" placeholder="请选择年份">
                  <a-select-option :value="item.value" v-for="item in yearList" :key="item.timeLabel" :code="item">{{
                    item.timeLabel }}</a-select-option>
                </a-select>
              </div>
              <!-- <a-date-picker placeholder="" @change="handleDateChange" :allowClear='false' v-model:value="year"
                format="YYYY" valueFormat="YYYY" picker="year" disabled /> -->
              <!-- {{ year }} -->
            </div>
          </div>
          <div class="wrap">
            <div class="polo-item" :style="{ border: `3px solid ${item.color}` }" v-for="item in poloList"
              :key="item.text">
              <span> {{ item.text }}</span>
              <span class="font-size-18px font-500 line-height-16px">{{ item.number }}</span>
            </div>
            <div class="water-polo-box">
            </div>
            <div ref="waterPolo" class="water-polo">
            </div>
          </div>
        </div>
        <div class="right-t-r">
          <div class="right-t-r-t">
            <div class="bar">各环节率-{{ current.text }}类型
              <span class="more" @click="loadMore('rate')">更多
                <CaretRightOutlined />
              </span>
            </div>
            <Category :list='totalRateList'></Category>
          </div>
          <div class="right-t-r-b">
            <div class="bar">各环节留存率</div>
            <Funnel :list='funnelList'></Funnel>
          </div>
        </div>
      </div>
      <div class="right-b">
        <div class="bar bar-long">本周/月数据
          <span class="more" @click="loadMore('time')">更多
            <CaretRightOutlined />
          </span>
        </div>
        <div class="table">
          <div class="table-item">
            <span>类型</span>
            <span>本周</span>
            <span>本月</span>
          </div>
          <div class="table-item" v-for="item in tableDataList" :key="item.key">
            <span>{{ item.label }}</span>
            <span>{{ item.week }}</span>
            <span>{{ item.month }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useECharts } from '@/hooks/web/useECharts';
import Progress from "./component/Progress.vue";
import Ring from "./component/Ring.vue";
import Pie from "./component/Pie.vue";
import Category from "./component/Category.vue";
import Funnel from "./component/Funnel.vue";
import { getWaterPoloOptions } from "./component/data"
import "echarts-liquidfill/src/liquidFill.js"; // 在需要水滴图的页面js引入
import { getImageUrl } from "@/assets/common/common.ts";
import { hrDataReport, getYearTime } from "@/api/data-center/hrdata.ts"
import { message } from "ant-design-vue";
const waterPolo = ref<HTMLDivElement | null>(null);
const year = ref<any>("")
const yearList = ref<any>([])
const router = useRouter()
const { setOptions } = useECharts(waterPolo as unknown as HTMLDivElement);

const targetCompletionRateList = ref<any>([
  { stripList: [] }
])
onMounted(async () => {
  await getTimeRange()
  await getData();
})

const initWaterPolo = () => {
  setOptions(getWaterPoloOptions((totalRate.value / 100), year.value))
}
const getTimeRange = async () => {
  const data = await getYearTime();
  if (data.currentYear) {
    yearList.value = data.timeRangeList
    year.value = data.currentYear.timeLabel
    timeRange.value = data.currentYear
  }
}

interface ListItem {
  url?: string;
  text?: string;
  activeUrl?: string;
  active?: boolean;
  index?: number;
  number?: number;
  color?: string;
  key?: string;
  label?: string;
  percent?: number;
  week?: number;
  month?: number;
  list?: any;
  bg?: string
}
const navList = ref<ListItem[]>([
  { url: 'nav-l', text: "大区", activeUrl: "nav-l-active", active: true, index: 1 },
  { url: 'nav-c', text: "高校", activeUrl: "nav-c-active", active: false, index: 2 },
  { url: 'nav-r', text: "性别", activeUrl: "nav-r-active", active: false, index: 3 },
])
const poloList = ref<ListItem[]>([
  { text: "入职教师", number: 0, color: "#167BFC", key: "entryTeacherCount" },
  { text: "在职教师", number: 0, color: "#6495D1", key: "onJobCount" },
  { text: "在岗教师", number: 0, color: "#6474D1", key: 'onDutyCount' },
  { text: "已带课教师", number: 0, color: "#9551C3", key: "leadTeacherCount" },
  { text: "差距", number: 0, color: "#E85B5B", key: "gapCount" },
])
const totalRate = ref<number>(0)
const totalTarget = ref<number>(0);
const targetPercentList = ref<any>([
])
const pieList = ref<ListItem[]>([
  { text: "已入职人数", number: 0, list: [] },
  { text: "收到简历数", number: 0, list: [] },
])
const totalRateList = ref<any>([
])
const funnelList = ref<ListItem[]>([
  { color: "#CCF1D0", bg: '#e2f2f4', label: 'totalResumesCount', text: "收到简历", number: 0, percent: 100, },
  { color: "#AFE9DA", bg: '#dcf1f6', key: "screenResumesRate", label: "screenResumesCount", text: "简历环节留存", number: 0, percent: 0 },
  { color: "#94E2E1", bg: '#d7eef7', key: "interviewResumesRate", label: "interviewResumesCount", text: "面试环节留存", number: 0, percent: 0 },
  { color: "#67D6E7", bg: '#cdebf7', key: "trainingResumesRate", text: "培训环节留存", label: "trainingResumesCount", number: 0, percent: 0 },
  { color: "#5CD3EB", bg: '#c6e5f4', key: "signResumesRate", text: "签约环节留存", label: "signResumesCount", number: 0, percent: 0 },
  { color: "#0CBAF9", bg: '#b8e4fa', key: "entryResumesRate", text: "总入职率", label: "entryResumesCount", number: 0, percent: 0 },
])

const tableDataList = ref<ListItem[]>([
  { week: 0, month: 0, key: "resumeSubmitNum", label: "简历" },
  { week: 0, month: 0, key: "arrivalScheduledNum", label: "待面" },
  { week: 0, month: 0, key: "interviewAcceptedNum", label: "过面" },
  { week: 0, month: 0, key: "trainingScheduledAcceptedNum", label: "待培" },
  { week: 0, month: 0, key: "trainingArrivalAcceptedNum", label: "到培" },
  { week: 0, month: 0, key: "assessmentAcceptedNum", label: "过培" },
  { week: 0, month: 0, key: "waitSignedNum", label: "待入职-待签" },
  { week: 0, month: 0, key: "onBoardingNum", label: "待入职-已签" },
  // { week: 0, month: 0, key: "confirmedDeclinedNum", label: "离职" },
  { week: 0, month: 0, key: "probationFailedNum", label: "劝退" },
  { week: 0, month: 0, key: "workingNum", label: "在职" },
  { week: 0, month: 0, key: "onDutyNum", label: "在岗-未请长假" },
  { week: 0, month: 0, key: "leadTeacherNum", label: "已代课" },
])
const current = ref<ListItem>(navList.value[0])
const handleNavChange = (item: ListItem) => {
  current.value = item
  navList.value.forEach(el => {
    el.active = false
  });
  item.active = true;
  getData()
}
const timeRange = ref<{ startTime: string; endTime: string; timeLabel: string }>({ startTime: "", endTime: "", timeLabel: "" })
const getData = async () => {
  let data = await hrDataReport({
    type: current.value.index,
    year: year.value,
    beginTime: timeRange.value.startTime,
    endTime: timeRange.value.endTime,
  })
  if (data.code == '10001') {
    message.error(data.msg)
    return
  }
  const { applicationRecruitResponses: list, recruitProcessResponses: tableList } = data;
  totalRate.value = data.totalTargetRate;
  initWaterPolo()
  // 目标完成率
  targetCompletionRateList.value = list.map((el, idx) => {
    return {
      text: el.typeName,
      number: el.purposeCount,
      percent: el.targetCompleteRate,
      stripList: [
        { text: "已入职", number: el.onBoardingCount, color: "#0BBC0B" },
        { text: "待入职", number: el.onBoardingInProgressCount, color: "#629DF4" },
        { text: "待签约", number: el.waitBoardingCount, color: "#967FC7" },
        { text: "差", number: el.lastCount, color: "#8696AB" },
      ]
    }
  })
  // 水滴球数据
  poloList.value.forEach(el => {
    if (data[el.key]) {
      el.number = data[el.key]
    }
  })
  // 目标占比
  const colorList = ['#f9804e', '#016FFC', '#15CD86', '#FDB700',]
  totalTarget.value = data.totalTarget
  targetPercentList.value = list.map((el, idx) => {
    return {
      text: el.typeName,
      number: el.purposeCount,
      color: colorList[idx],
      percent: el.purposeRate,
      value:el.purposeRate
    }
  })
  // 分布情况
  pieList.value.forEach((item, i) => {
    item.number = i === 0 ? data.entryTeacherCount : data.totalResumesCount
    item.list = list.map((el, idx) => {
      return {
        text: el.typeName,
        percent: i === 0 ? el.onBoardingRate : el.resumeSubmitRate,
        color: colorList[idx],
        number: i === 0 ? el.onBoardingCount : el.resumeSubmitCount
      }
    })
  })
  // 各环节率
  totalRateList.value = list.map((el, idx) => {
    return {
      name: el.typeName,
      color: colorList[idx],
      list: [
        {
          key: "到面",
          value: el.arrivalInterviewRate
        },
        {
          key: "过面",
          value: el.interviewPassRate
        },
        {
          key: "到培",
          value: el.trainingArrivalRate
        },
        {
          key: "过培",
          value: el.trainingPassRate
        },
        {
          key: "过培签约",
          value: el.trainingPassSignRate
        },
        {
          key: "过培入职",
          value: el.trainingPassEntryRate
        },
      ]
    }
  })
  funnelList.value.forEach(el => {
    if (data[el.label]) {
      el.number = data[el.label]
    }
    if (data[el.key]) {
      el.percent = data[el.key]
    }
  })
  // 本周.本月数据
  tableList.forEach(item => {
    tableDataList.value.forEach((el: any) => {
      if (item[el.key] !== undefined) {
        if (item.date == '本周') {
          el.week = item[el.key]
        }
        if (item.date == '本月') {
          el.month = item[el.key]
        }
      }
    })
  })
}

const handleDateChange = () => {
  getData()
}

const currentHoverItem = ref<any>({})
const handleEnter = (el) => {
  currentHoverItem.value = el
}
const handleLeave = (el) => {
  currentHoverItem.value = {}
}

const loadMore = (type) => {
  router.push({
    path: "/Data/HRStatementDetails",
    query: {
      ...timeRange.value as any,
      type: type
    }
  })
}

const handleYearChange =()=>{
  timeRange.value = yearList.value.find(el=>el.timeLabel==year.value)
  console.log(yearList.value,'yearList')
  getData()
}
</script>

<style lang="less" scoped>
#hr-statement {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/dataCentre/HRStatement/bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0 12px;
  box-sizing: border-box;
  display: flex;

  .left {
    width: 28vw;
    height: 100%;
    padding-top: 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .left-t {
      height: 450px;

      .progress-container {
        height: 300px;
        display: grid;
        grid-template-rows: 1fr 1fr 1fr 1fr;

      }

      .tooltip-wrap {
        display: flex;
        margin-top: 20px;
        width: 350px;
        margin: 0 auto;

        .tooltip-item {
          flex: 1;
          cursor: pointer;

          .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 4px;
          }
        }
      }
    }

    .left-c {
      height: 320px;

      .ring-box {

        position: relative;
        width: 100%;
        height: 100%;
        min-width: 535px;

        .ring-part-wrap {
          background: url("@/assets/images/dataCentre/HRStatement/ring-four.png") no-repeat;
          background-position: 45% 115%;
          background-size: 520px 179px;
          display: flex;
          width: 100%;
          height: 200px;
          flex-wrap: wrap;
          padding-top: 20px;
          box-sizing: border-box;

          // flex: 1;
          .ring-part {
            width: 50%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            color: #333;
            font-weight: 700;

            &:nth-child(1) {
              order: 2;
            }

            &:nth-child(2) {
              order: 4;
            }

            &:nth-child(3) {
              order: 3;
            }

            &:nth-child(4) {
              order: 1;
            }

            .ring-part-total {}

            .dot-wrap {
              gap: 10px;
              align-items: center;

              .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;

              }
            }

            &:nth-child(1) {
              display: flex;
              flex-direction: row-reverse;
              padding-left: 70px;
              box-sizing: border-box;

              .dot-wrap {
                flex-direction: row-reverse;
              }
            }

            &:nth-child(2) {
              display: flex;
              flex-direction: row-reverse;
              padding-left: 70px;
              box-sizing: border-box;

              .dot-wrap {
                flex-direction: row-reverse;
              }
            }

            &:nth-child(3) {
              display: flex;
              padding-right: 70px;
              box-sizing: border-box;
            }

            &:nth-child(4) {
              display: flex;
              padding-right: 70px;
              box-sizing: border-box;
            }
          }
        }

        .ring-chart {
          position: absolute;
          z-index: 9;
          height: 202px;
          width: 202px;
          left: 49.966%;
          transform: translateX(-50%);
          top: 1.21%;
        }
      }
    }

    .left-b {
      flex: 1;
    }
  }

  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
    box-sizing: border-box;

    .right-t {
      height: 87%;
      display: flex;

      .right-t-c {
        height: 100%;
        flex: 1;

        .nav {
          height: 70px;
          width: 100%;
          margin-bottom: 50px;
          background: url("@/assets/images/dataCentre/HRStatement/nav-bg.png") no-repeat;
          background-size: 100% 60px;
          position: relative;
          // transform: translateX(-4%);
          padding-top: 10px;

          .nav-center {
            width: 420px;
            margin: 0 auto;
            height: 40px;
            display: flex;

            .nav-item {
              flex: 1;
              position: relative;
              cursor: pointer;

              img {
                height: 40px;
                width: 100%;
              }

              span {
                text-align: center;
                position: absolute;
                width: 100%;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }

          .nav-right {
            position: absolute;
            right: 9%;
            top: 15px;
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 30px;
            background: transparent;
            // :deep(.ant-picker) {
            //   border: none;
            //   background: transparent;
            // }
            .date-view {
              .date-val {
                position: absolute;
                width: 100%;
                height: 100%;
                top: -2px;
                left: -6px;
                display: flex;
                align-items: center;
                padding-left: 40px;
                font-size: 16px;
                color: #56658C;
              }

              .date-img {
                width: 94px;
                height: 36px;
              }

              .date-com {
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                opacity: 0;
              }
            }
          }
        }

        .wrap {
          position: relative;
          width: 609px;
          height: 609px;
          margin: 0 auto;

          .polo-item {
            position: absolute;
            z-index: 99;
            width: 70px;
            height: 70px;
            background: linear-gradient(316deg, #FFFFFF 0%, #E7ECFD 100%);
            border-radius: 19px;
            border: 3px solid #6474D1;
            text-align: center;
            font-size: 12px;
            color: #333;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            &:nth-child(1) {
              left: 30px;
              top: 183px;
            }

            &:nth-child(2) {
              left: 44px;
              top: 399px;
            }

            &:nth-child(3) {
              left: 166px;
              top: 500px;
            }

            &:nth-child(4) {
              left: 393px;
              top: 490px;
            }

            &:nth-child(5) {
              left: 480px;
              top: 400px;
            }
          }
        }

        .water-polo-box {
          width: 609px;
          height: 609px;
          background: url("@/assets/images/dataCentre/HRStatement/pan.png") no-repeat;
          background-size: 100% 100%;
          animation: spin 30s linear infinite;
          display: flex;
          justify-content: center;
          align-items: center;

        }

        .water-polo {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          height: 550px;
          width: 550px;

        }
      }

      .right-t-r {
        width: 28vw;
        display: flex;
        flex-direction: column;
        padding-top: 24px;
        box-sizing: border-box;

        .right-t-r-t {
          height: 420px
        }

        .right-t-r-b {
          // height: 400px
          height: 40vh;
        }
      }
    }

    .right-b {
      height: 150px;
    }
  }
}

.bar {
  width: 100%;
  background: url("@/assets/images/dataCentre/HRStatement/bar.png") no-repeat;
  background-size: 100% 100%;
  height: 37px;
  padding-left: 38px;
  box-sizing: border-box;
  line-height: 37px;
  color: #333;
  font-size: 18px;
  font-weight: 600;
  position: relative;

  .more {
    position: absolute;
    height: 20px;
    font-weight: 400;
    font-size: 14px;
    color: #718CC6;
    right: 10px;
    top: -5px;
    cursor: pointer;

    &:hover {
      color: #95acdf
    }
  }
}

.bar-long {
  background: url("@/assets/images/dataCentre/HRStatement/bar-long.png") no-repeat !important;
  background-size: 100% 100% !important;
  position: relative;
  height: 37px !important;


}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.ring-two {
  background: url("@/assets/images/dataCentre/HRStatement/ring-two.png") no-repeat !important;
  // background-position: 7px 21px !important;
  background-position: 45% 115% !important;
  background-size: 520px 180px !important;
}

.order {
  &:nth-child(1) {
    flex-direction: row-reverse !important;
    padding: 0 !important;
    padding-left: 70px !important;

    .dot-wrap {
      flex-direction: row-reverse !important;
    }

    order: 2 !important;
  }

  &:nth-child(2) {
    padding: 0 !important;
    padding-right: 70px !important;
    flex-direction: unset !important;

    .dot-wrap {
      flex-direction: unset !important;
    }

    order: 1 !important;
  }
}

.table {
  display: flex;
  width: 100%;

  .table-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90px;
    margin-top: 6px;

    span {
      flex: 1;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgba(188, 209, 254, 0.3);
      white-space: nowrap;

      &:nth-child(1) {
        background: rgba(188, 209, 254, 0.3);
      }

      &:nth-child(2) {
        border-top: none;
      }

      &:nth-child(3) {
        border-top: none;
      }
    }

    &:nth-last-child(2) {
      flex: 1.2;
    }
  }
}

:deep(.ant-picker .ant-picker-input >input) {
  color: #333 !important;
}
</style>